"use strict";
import React from "react";
import ReactDOM from "react-dom";
import { History, Lifecycle } from "react-router";
import Reflux from "reflux";
import $ from "jquery";
import _ from "lodash";

import { CONFIG } from "../common/config.js";
import { GOTOMixin } from "./mixins.jsx";
import { ProductActions } from "../action/productaction.js";
import { ProductStore } from "../store/productstore.js";


var PageProduct = React.createClass({
	mixins: [History, GOTOMixin, Reflux.connect(ProductStore, "data")], // Reflux.connect(FundlistStore, "fundlist"),],
	getInitialState: function(){
		return {
			displayBlock: 'SFOM', // 初始显示 SFOM(Stock Fund Of Market)
		};
	},
	componentDidMount: function(){
		var parent = ReactDOM.findDOMNode(this);
		var parent = $(parent).parent();
		var className = parent.attr('class');
		if(className != 'page_productData'){
			parent.attr('class', 'page_productData');
		}

		if(this.state.data && this.state.data.state && this.state.data.state.displayBlock){
			this.setState({displayBlock: this.state.data.state.displayBlock});
		}
	},
	handleRowTap: function(event){
		var tr = $(event.target).parents('tr');
		var target = tr.attr('data-target');
		if(target == this.state.displayBlock){
			return;
		}
		this.setState({displayBlock: target});
		ProductActions.saveState({displayBlock: target})
	},
	render: function(){
		return (
	<div id="container" className="container">
		<header id="header">
			<span className="back_btn" onTouchTap={this.gotoIndex}><i className="icon-angle-left"></i></span>
			<span className="header_title"><span>产品数据</span></span>
		</header>
		<div id="page_main">
			<div className="list_topMain">
				<div className="sort_main">
					<div className="sort_type">
		                <span className="first now">日</span><span className="second">月</span>
		            </div>
				</div>
				<div className="first_main">
					<div className="title">股基占有率</div>
					<div className="value_main">
						<span className="value">120</span><small>%</small>
					</div>
					<div className="change_main">
						<span className="chg up_color">1.11%</span>
					</div>
				</div>
			</div>
			<div className="table_list_model">
				<table className="slide">
					<tbody><tr className="gjzyl down"  data-target="SFOM" onTouchTap={this.handleRowTap}>
						<td className="left">
							<div className="title">
								<div className="icon"></div>
								<p>股基占有率</p>
							</div>
						</td>
						<td className="right">
							<div className="top_info">
								<div className="all_price">
									<span className="value">5.37</span><small>%</small>
								</div>
								<div className="chg">
									<p className="hb">环比:<span className="up">1.11%</span></p>
									<p className="tb">同比:<span className="down">-2.39%</span></p>
								</div>
							</div>
							<div className="fold_main"  style={{display: this.state.displayBlock=='SFOM'?"block": 'none'}}>
								<div className="mid_info">
									<div className="chart"></div>
									<div className="info">
										<div className="first">
											<div className="title">购买股票的资金</div>
											<div className="value">4600亿元</div>
										</div>
										<div className="first">
											<div className="title">购买产品的资金</div>
											<div className="value">4600亿元</div>
										</div>
									</div>
								</div>
								<div className="btm_info">
									<div className="more" onTouchTap={this.gotoProductSFOM}><span><i className="icon-align-left"></i></span><label>详情</label></div>
									<div className="time">
										<i className="icon-time"></i> <span>2015-01-28 15:38</span>
									</div>
								</div>
							</div>
						</td>
					</tr>
					<tr className="gml down"  data-target="public" onTouchTap={this.handleRowTap}>
						<td className="left">
							<div className="title">
								<div className="icon"></div>
								<p>公募类</p>
							</div>
						</td>
						<td className="right">
							<div className="top_info">
								<div className="price">
									<p className="pre_value"><span className="type">T+0</span><span className="value">9300</span><small>亿元</small></p>
									<p className="next_value"><span className="type">T+1</span><span className="value">9300</span><small>亿元</small></p>
								</div>
								<div className="chg">
									<p className="hb">环比:<span className="up">1.11%</span></p>
									<p className="tb">同比:<span className="down">-2.39%</span></p>
								</div>
							</div>
							<div className="fold_main" style={{display: this.state.displayBlock=='public'?"block": 'none'}}>
								<div className="mid_info">
									<div className="all_chart"></div>
								</div>
								<div className="btm_info">
									<div className="more" onTouchTap={this.gotoProductPublic}><span><i className="icon-align-left"></i></span><label>详情</label></div>
									<div className="time">
										<i className="icon-time"></i> <span>2015-01-28 15:38</span>
									</div>
								</div>
							</div>
						</td>
					</tr>
					<tr className="gsl down" data-target="fixed" onTouchTap={this.handleRowTap}>
						<td className="left">
							<div className="title">
								<div className="icon"></div>
								<p>固收类</p>
							</div>
						</td>
						<td className="right">
							<div className="top_info">
								<div className="price">
									<p className="pre_value"><span className="type">T+0</span><span className="value">9300</span><small>亿元</small></p>
									<p className="next_value"><span className="type">T+1</span><span className="value">9300</span><small>亿元</small></p>
								</div>
								<div className="chg">
									<p className="hb">环比:<span className="up">1.11%</span></p>
									<p className="tb">同比:<span className="down">-2.39%</span></p>
								</div>
							</div>
							<div className="fold_main" style={{display: this.state.displayBlock=='fixed'?"block": 'none'}}>
								<div className="mid_info">
									<div className="all_chart"></div>
								</div>
								<div className="btm_info">
									<div className="more" onTouchTap={this.gotoProductFixed}><span><i className="icon-align-left"></i></span><label>详情</label></div>
									<div className="time">
										<i className="icon-time"></i> <span>2015-01-28 15:38</span>
									</div>
								</div>
							</div>
						</td>
					</tr>
					<tr className="qyl down" data-target="equity" onTouchTap={this.handleRowTap}>
						<td className="left">
							<div className="title">
								<div className="icon"></div>
								<p>权益类</p>
							</div>
						</td>
						<td className="right">
							<div className="top_info">
								<div className="price">
									<p className="pre_value"><span className="type">T+0</span><span className="value">9300</span><small>亿元</small></p>
									<p className="next_value"><span className="type">T+1</span><span className="value">9300</span><small>亿元</small></p>
								</div>
								<div className="chg">
									<p className="hb">环比:<span className="up">1.11%</span></p>
									<p className="tb">同比:<span className="down">-2.39%</span></p>
								</div>
							</div>
							<div className="fold_main" style={{display: this.state.displayBlock=='equity'?"block": 'none'}}>
								<div className="mid_info">
									<div className="all_chart"></div>
								</div>
								<div className="btm_info">
									<div className="more" onTouchTap={this.gotoProductEquity}><span><i className="icon-align-left"></i></span><label>详情</label></div>
									<div className="time">
										<i className="icon-time"></i> <span>2015-01-28 15:38</span>
									</div>
								</div>
							</div>
						</td>
					</tr>
				</tbody></table>
			</div>
		</div>
	</div>
		);
	}	
});


export { PageProduct };